{literal}
<script type="text/javascript">
	$(document)
			.ready(
					function() {
						$('#registro')
								.bootstrapValidator(
										{
											fields : {
												correo : {
													validators : {
														remote : {
															message : 'La direcci&oacute;n de correo ya esta registrada',
															url : '/usuario.php?op=validaxcorreo'
														},
														emailAddress : {
															message : 'Ingrese un correo valido'
														},
														notEmpty : {
															message : 'Complete su correo por favor'
														}
													}
												},
												nombre : {
													validators : {
														notEmpty : {
															message : 'Complete su nombre por favor'
														}
													}
												},
												apellido : {
													validators : {
														notEmpty : {
															message : 'Complete su apellido por favor'
														}
													}
												},
												clave : {
													validators : {
														notEmpty : {
															message : 'ingrese una contrase&ntilde;a por favor'
														},
														identical : {
															field : 'confirmaClave',
															message : 'Las contrase&ntilde;as deben ser iguales'
														}
													}
												},
												confirmaClave : {
													validators : {
														notEmpty : {
															message : 'ingrese su contrase&ntilde;a nuevamente por favor'
														},
														identical : {
															field : 'clave',
															message : 'Las contrase&ntilde;as deben ser iguales'
														}
													}
												},
												dni : {
													validators : {
														digits : {
															message : 'El dni solo pueden ser numeros'
														},
														notEmpty : {
															message : 'El dni es requerido'
														}
													}
												},
												telefono : {
													validators : {
														digits : {
															message : 'El telefono solo pueden ser numeros'
														},
														notEmpty : {
															message : 'El telefono es requerido'
														}
													}
												}
											}
										});
						//fin bootstrapvalidator

					});

	$(document).ready(
			function() {
				$("#confirmar").click(
						function() {
							$('#registro')
							.data('bootstrapValidator').validate();
							if(!$('#registro')
									.data('bootstrapValidator').isValid()){
								return;
							}	
							
							var id = $("#idUsuario").val();
							var nombre = $("#nombre").val();
							var apellido = $("#apellido").val();
							var dni = $("#dni").val();
							var email = $("#correo").val();
							var password = $("#clave").val();
							var telefono = $("#telefono").val();
							// Returns successful data submission message when the entered information is stored in database.
							var dataString = 'idUsuario=' + id + '&nombre='
									+ nombre + '&apellido=' + apellido
									+ '&dni=' + dni + '&correo=' + email
									+ '&clave=' + password + '&telefono='
									+ telefono;
							$.ajax({
								type : "POST",
								url : "registro.php?op=alta&web=no",
								data : dataString,
								cache : false,
								success : function(result) {
									var usrJson = jQuery.parseJSON(result);
									$('#idUsr').val(usrJson.id);
									$('#cargaCredito').prop( "disabled", false );
									grabado();

								}
							});
							return false;
						});
			});
	$(document).ready(function() {
		$('#promoSelect').on('change', function() {

			refreshCargaModal();

			});
		});

	
	function refreshCargaModal(){
		  var creditos = $('#promoSelect option:selected').attr("creditos");
		  var precio = $('#promoSelect option:selected').attr("precio");
	      $('#precio').val(precio);
	}

	
	function cargarCredito(){
		
		var id = $('#idUsr').val();
		var dataString = 'idUsr=' + id; 
	$.ajax({
	type : "POST",
	url : "usuarios.php?operacion=getById",
	data : dataString,
	cache : false,
	success : function(result) {
		var usrJson = jQuery.parseJSON( result );
		$('#modalLabel').html('Cargar credito: <strong>' + usrJson.apellido + ', ' + usrJson.nombre + '<strong>');
		$('#creditosDisponibles').html('<strong>' + usrJson.creditos  + '<strong>');
		$('#creditosDisponibles').val(usrJson.creditos);
		$('#idUsrCarga').val(usrJson.id);
	}
	});

	$.ajax({
	type : "POST",
	url : "promocion.php?operacion=getPromos",
	cache : false,
	success : function(result) {
		var promosJson = jQuery.parseJSON( result );
		var options="";
		$.each(promosJson, function(idx, obj) {
			options+= "<option value='" + obj.id +"' creditos='" + obj.creditos +"' precio='" +obj.precio + "' libre='" + obj.libre +"' >" +obj.descripcion + " - " + (obj.libre == 'S' ? 'Libre' : obj.creditos  + " creditos") +" - $" + obj.precio  +"</option>"
		});
		$('#promoSelect').html(options);
		refreshCargaModal();
	}
	});

	var dataString = 'idUsr=' + id;
	$.ajax({
		type : "POST",
		url : "usuarios.php?operacion=getHistory",
		data : dataString,
		cache : false,
		success : function(result) {
			var historicosJson = jQuery.parseJSON( result );
			var table = $("#historicoTable tbody");
			table.empty();
			$.each(historicosJson, function(idx, obj) {
				table.append("<tr><td>"+(obj.libre == 'S' ? 'Libre' : obj.creditos) + "</td><td>"+obj.precio+ "</td><td>"+ obj.fechaCarga+"</td><td>"+ obj.vencimientoCreditos+"</td></tr>");
			});
		}
		});
		
		
		$('#carga').modal();
		
	}
	
	$(document).ready(
			function() {
				$("#cargaConfirmaBtn").click(
						function() {
							
							var usrId = $("#idUsrCarga").val();
	                        var creditos = $('#promoSelect option:selected').attr("creditos");
	                        var libre = $('#promoSelect option:selected').attr("libre");
							var precio = $("#precio").val();
							var promoId = $('#promoSelect').val();
							// Returns successful data submission message when the entered information is stored in database.
							var dataString = 'idUsrCarga=' + usrId + '&creditos='
									+ creditos 	+ '&precio=' + precio + '&libre=' + libre + '&promoId=' + promoId;
							
							$.ajax({
								type : "POST",
								url : "usuarios.php?operacion=cargaCredito",
								data : dataString,
								cache : false,
								success : function(result) {
									var hcaJson = jQuery.parseJSON( result );
									$('#carga').modal('toggle');
								}
							});
							return false;
						});
			});
	
</script>

<script type="text/javascript">
	function grabado() {
		$('#successAlert').show("slow");
		$('#confirmar').attr('disabled', true);
		$("#nombre").attr('disabled', true);
		$("#apellido").attr('disabled', true);
		$("#dni").attr('disabled', true);
		$("#correo").attr('disabled', true);
		$("#telefono").attr('disabled', true);
	}
</script>
{/literal}
<div style="width: 100%;">
	<!-- style="width: 50%;" -->

	<section class="panel panel-primary">
		<header class="panel-heading">
			<h3 class="panel-title">Nuevo usuario</h3>
		</header>
		<div class="panel-body">
			<div class="alert alert-success" id="successAlert"
				style="display: none">
				<a href="#" class="close" data-dismiss="alert">&times;</a> El
				usuario se ha registrado con exito.
			</div>

			<form role="form" action="/registro/?op=alta&web={$web}"
				id="registro" method="post" class="form-horizontal">

				<div class="form-group">
					<label for="idUsr" class="col-lg-2 control-label">ID</label>
					<div class="col-lg-5">
						<input type="text" class="form-control" id="idUsr" name="idUsr"
							disabled>
					</div>
				</div>
				<div class="form-group">
					<label for="correo" class="col-lg-2 control-label">Correo
						Electr&oacute;nico</label>
					<div class="col-lg-5">
						<input type="text" class="form-control" id="correo" name="correo"
							placeholder="Ingresa tu correo electr&oacute;nico">
					</div>
				</div>
				{*poner recaptcha*}
				<div class="form-group">
					<label for="nombre" class="col-lg-2 control-label">Nombre</label>
					<div class="col-lg-5">
						<input type="text" class="form-control" id="nombre"
							placeholder="Ingresa tu nombre" name="nombre">
					</div>
				</div>
				<div class="form-group">
					<label for="apellido" class="col-lg-2 control-label">Apellido</label>
					<div class="col-lg-5">
						<input type="text" class="form-control" id="apellido"
							placeholder="Ingresa tu apellido" name="apellido">
					</div>
				</div>
				<div class="form-group">
					<label for="dni" class="col-lg-2 control-label">Documento</label>
					<div class="col-lg-5">
						<input type="text" class="form-control" id="dni"
							placeholder="Ingresa tu dni" name="dni">
					</div>
				</div>
				<div class="form-group">
					<label for="telefono" class="col-lg-2 control-label">Tel&eacute;fono</label>
					<div class="col-lg-5">
						<input type="text" class="form-control" id="telefono"
							placeholder="Ingresa tu tel&eacute;fono" name="telefono">
					</div>
				</div>
				{if $web eq 'si'}

				<div class="form-group">
					<label for="clave" class="col-lg-2 control-label">Clave</label>
					<div class="col-lg-5">
						<input type="password" class="form-control" id="clave"
							placeholder="Ingresa tu clave" name="clave">
					</div>
				</div>

				<div class="form-group">
					<label for="confirmaclave" class="col-lg-2 control-label">Confirm&aacute;
						tu Clave</label>
					<div class="col-lg-5">
						<input type="password" class="form-control" id="confirmaclave"
							placeholder="Confirm&aacute; tu clave" name="confirmaClave">
					</div>
				</div>

				{/if}
				<div style="padding-left: 36%;">
					<button type="button" class="btn btn-primary" id="confirmar">Confirmar</button>
					<button type="button" class="btn btn-success" id="cargaCredito" onclick="cargarCredito();" disabled>Cargar Credito</button>
				</div>
				
			</form>
		</div>
	</section>

</div>


<!-- Modal -->
<div class="modal fade" id="carga" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="modalLabel"></h4>
      </div>
      <div class="modal-body">
      	
      	
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#nuevaCargaTab" data-toggle="tab">Nueva carga</a></li>
        <li><a href="#historicoTab" data-toggle="tab">Hist&oacute;rico</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="nuevaCargaTab">
        	<br>
        	<form role="form" id="cargaCreditoForm"
					method="post">

					<input type="hidden" id="idUsrCarga" name="idUsrCarga">
					

					<div class="form-group">
						<label for="promoSelect">Paquete</label> <select class="form-control" id="promoSelect"
							name="promoSelect"><option value="0">Elige un paquete</option></select>
					</div>
					
					<div class="form-group">
						<label for="precio">Precio</label> <input type="text"
							class="form-control" id="precio" name="precio"
							placeholder="Precio total">
					</div>

				</form>    
            
        </div>
        <div class="tab-pane" id="historicoTab">
			<div style="overflow: auto; height: 250px">
			<table class="table table-striped" id="historicoTable">
            	<thead>
            	<tr>
            	 <th>Creditos</th><th>Precio</th><th>Fecha</th><th>Vencimiento</th>
            	</tr>
            	</thead>
            	<tbody></tbody>
            </table>
			</div>
            
            
        </div>
    </div>
      	
      	
      	
			
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
        <button type="button" id="cargaConfirmaBtn" class="btn btn-primary">Confirmar</button>
      </div>
    </div>
  </div>
</div>